import React, {Component, ReactPropTypes} from 'react'
import PropTypes from 'prop-types';
import {
    Text,
    View,
    StyleSheet,
    Button,
    Image,
    FlatList,
    ScrollView,
    TouchableOpacity,
    TextInput,
    StyleProp, ViewStyle, KeyboardTypeOptions, TextStyle
} from 'react-native'
import {AppIcon} from "../../assets/icon/AppIcon";
import styles, {HUNDRED_PERCENT, margin, padding} from "../../style";

export interface CommonInputInterface {
    icon: {
        name: string,
        size: number,
        color: string,
        style?: StyleProp<ViewStyle>,
    },
    style?: StyleProp<ViewStyle>,
    inputStyle?: TextStyle,
    placeholder: string,
    placeholderTextColor?: string,
    FeatureBtn?: any,
    keyboardType?: KeyboardTypeOptions,
    secureTextEntry?: boolean,
    getValue?:(text:string)=>void
}

export default class CommonInput extends Component {
    input:TextInput;
    public props: CommonInputInterface;
    static defaultProps = {
        placeholderTextColor: "#fff",
    };

    render() {
        const {FeatureBtn, style, placeholder, keyboardType, icon,getValue,inputStyle} = this.props;
        return <View style={[style, {
            minHeight: 50,
            width: HUNDRED_PERCENT
        }, styles.flexDirectionRowNotFlex, styles.centered, CommonInputStyles.container]}>
            <AppIcon {...icon} style={[margin(0, 8, 0, 4), icon.style]}/>
            <TextInput onChangeText={getValue} ref={input=>this.input=input} keyboardType={keyboardType} autoCorrect={true} autoCapitalize={"none"} placeholder={placeholder}
                       underlineColorAndroid={"transparent"}
                       style={[{height: 30, paddingVertical: 0,flex: 1, fontSize: 16},inputStyle]} placeholderTextColor={"white"}/>
            {FeatureBtn ? FeatureBtn : null}
        </View>
    }
}


const CommonInputStyles = StyleSheet.create({
    container: {
        borderBottomColor: "#F2F2F2",
        borderBottomWidth: 1,
    }
});
